Сохранение данных на сервере и их обратная загрузка в клиент

[__Alex__]

Здравствуйте.

Нужно сохранять данные с клиента на сервер, сохранять их в файле, а потом забирать их обратно и отдавать на клиент. Клиент на JS, данные в виде html.

Пытаюсь разобраться с 1 частью - отправлять и сохранять в файл.

Отправка

const data = '<p>Some html test</p>';
const server = new XMLHttpRequest();
server.open('POST', 'http://mySite.ru/save.php', login, password);
server.send(data);
server.onreadystatechange = console.log(server.readyState); // 1

Я правильно отправляю?
Как на сервере принять эти данные и ответить?
Php знаю слабо, там как-то так принимается: $_POST[], как ответить клиенту, что данные приняты?

Можно ли это на Node.js (совсем его не знаю) сделать без компиляции в бинарный код, например через файл save.js?

[SuperZen]

Не знаю зачем..., но вот:

index.js

const express = require('express')
const app = express()
const path = require('path')
const fs = require('fs')
const bodyParser = require('body-parser')

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'))
})

app.get('/data', (req, res) => {
  fs.readFile(path.join(__dirname, 'data.json'), 'utf8', (error, data) => {
    if (error) res.json({ status: 'error' })
    res.json(JSON.parse(data))
  })
})

app.post('/save', (req, res) => {
  fs.readFile(path.join(__dirname, 'data.json'), 'utf8', (error, data) => {
    if (error) res.json({ status: 'error' })
    const nextData = JSON.parse(data)
    nextData.push({ id: nextData.length + 1, title: req.body.title })
    fs.writeFile(path.join(__dirname, 'data.json'), JSON.stringify(nextData), 'utf8', (error) => {
      if (error) res.json({ status: 'error' })
      res.json(nextData)
    })
  })
})

app.listen(3000, () => {
  console.log('started on port 3000')
})

data.json

[
  {
    "id": 1,
    "title": "русские буквы"
  }
]

index.html

<div id="result"></div>
<input id="text" type="text" />
<input id="load" type="button" value="load" />
<input id="save" type="button" value="save" />
<script>
  const client = (function () {
    return {
      getData() {
        fetch('/data')
          .then(r => r.json())
          .then(r => document.getElementById('result').innerText = JSON.stringify(r))
      },
      save() {
        fetch('/save', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ title: document.getElementById('text').value })
        })
          .then(r => r.json())
          .then(r => document.getElementById('result').innerText = JSON.stringify(r))
      }
    }
  })()

  document.getElementById('save').addEventListener('click', function () {
    client.save()
  })

  document.getElementById('load').addEventListener('click', function () {
    client.getData()
  })
</script>

package.json

{
  "name": "tests",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.4"
  }
}

yarn install или npm install
node index.js

http://localhost:3000

[Artur_Hopf]

Файлики не вариант, ставь sql таблицу на сервер, есть бесплатные. Выбери что нибудь одно или уж php или node.js. Оба они это все могут.

Если уж ради теста хочешь попробовать в файлик (хотя не рекомендую, он может "поломаться", и пользователи все твои пропадут) то как то так
js файлик:

var object = {login: login, password: password}; //после двоиточия переменная
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://mySite.ru/save.php', true);
xhr.send(object);//отправляем
if (xhr.status != 200) {
  // обработать ошибку
} else {
  alert( xhr.responseText ); // если тебе надо от сервера что то вернуть
  //если нет просто пишешь например
   alert('запись в фаил');
}

в файле save.php будет примерно так:

$object = $_POST['object'] ;
$object['login'] ;//твой логин
$object['password'] ;//твой пароль
$file = 'file.txt'; //надо указать где лежит и как называется
$current = file_get_contents($file); //открываем этот файлик
file_put_contents($file, $object['login']); //например записали туда логин

Над структурой записи в фаил сам подумай, чтоб оттуда было легко достать

И перед записью надо хешировать данные, если файлик стырят, все пароли попадут к злоумышленникам, ну и этот фаил можно удалить. Например копил ты кучу пользователей годик, а фаил взял и удалился)

[Artur_Hopf]

SuperZen,
Ему научится надо, лучше уж php пока что =) копированием кода ничего не поймет

[laimas]

file_put_contents($file, $object['login']); //например записали туда логин

И как с другими юзерами быть?

[__Alex__]

Сохранение в файл - временное решение, чтобы не заморачиваться с базой данных прямо сейчас.

Пароль и логин нужен для того, чтобы только ограниченный круг юзеров мог делать записи и их читать (совместная работа нескольких юзеров над одним проектом). Соответственно нужно как-то делать проверку перед принятием данных и их записью / чтением.

Как сформировать ответ клиенту с сервера? У меня пока возвращается только "1" - соединение открыто.

[laimas]

__Alex__,
где бы данные сервер не хранил, такой набор данных никогда не будет хранить в себе пароли. Хранят не пароли, а хеш паролей.
При запросе клиента ищется логин указанный, если есть такой, то присланный пароль хешируется и сравнивается с хранимым хеш логина, если равны, то дается доступ.